<template>
	<view :style="{height:contentHight+'px'}">
		<!-- 图片 -->
		<view class="top">
			<image class="top_img" :src="itemContent.src" mode="widthFix"></image>
		</view>
		<!-- 中间1 -->
		<view class="spanView">
			<!-- 标签 -->
			<view>
				<template v-for="item in itemContent.tag" :key="item">
					<view class="label_item">{{item}}</view>
				</template>
			</view>
		
			<!-- 介绍 -->
			<view class="briefCss">
				<p>{{itemContent.className}}介绍：</p>
				<p style="text-indent: 2em;margin-top: 10rpx;">{{itemContent.brief}}</p>
			</view>
		</view>
		
		<!-- 中间2 -->		
		<p class="pJu">剧集列表</p>
		<view class="contentTwo">
			<template v-for="(item,index) in isOpen?juji:juji.slice(0,6)" :key="index">
				<dl-square class="allBox-item" :className="item.jujiName" :distance="item.id" @change="changeSque(itemContent)" :src="item.imgSrc"></dl-square>
			</template>
		</view>
		<!-- 展示更多 -->
		<view v-if="juji.length>6" class="list_open" @click="isOpen=!isOpen">
			{{isOpen?'收起':'展开更多'}}<text class="iconfont" :class="isOpen?'icon-shuangjiantou-shang':'icon-shuangjiantou-xia'"></text>
		</view>
	</view>
</template>
<script>
	export default {
		data(){
			return{
				contentHight: 100,
				itemContent: {},
				juji: [],
				isOpen:false
			}
		},
		methods: {
			changeSque(item){				
				uni.navigateTo({
					url: '/uni_modules/my-cartnetwork/components/cartoon-order/cartoon-order?item='+encodeURIComponent(JSON.stringify(item))
				})
			}
		},
		onShow:function(){			
			let that = this;
			// 获取屏幕高度
			uni.getSystemInfo({
				success:function(res){
					that.contentHight = res.windowHeight;
				}
			});
			
		},
		onLoad:function(options){			
			// 点击传过来的数据
			this.itemContent = JSON.parse(decodeURIComponent(options.item));
			this.juji = this.itemContent.juji
			let that = this;
			// 设置导航栏标题文字
			uni.setNavigationBarTitle({
				title: that.itemContent.className
			});
		}
	}
</script>
<style scoped>
	/* 图片 */
	.top_img{
		width: 100%;
	}
	/* 标签view */
	.label_item{
		display: inline-block;
		padding: 5px 30px;
		margin: 5px;
		border-radius: 5px;
		background-color: black;
		color: white;
	}
	/* 介绍 */
	.briefCss{
		margin: 30rpx auto;
		width: 90%;
		border-top: 1px solid grey;
		border-bottom: 1px solid grey;
		padding: 20rpx 0;
	}
	/* 剧集 */
	.allBox-item{
		width: 30%;
	}
	.pJu,.contentTwo{		
		width: 94%;
		margin: 10rpx auto;
	}
	.pJu{
		font-size: 18px;
		font-weight: 400;
	}
	.contentTwo{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.twoImg{
		flex-basis: 30%;
		margin-bottom: 30rpx;
	}
	.twoImg img{
		width: 100%;
		height: 100%;
	}
	.txtCss{
		text-align: center;
	}
	/* 展示 */
	.showMore{
		color: rgb(245,180,62);
		text-align: center;
		padding-bottom: 20rpx;
	}
	.show{
		display: block;
	}
	.noshow{
		display: none;
	}
	.list_open{
		text-align: center;
		color: #0066ff;
	}
</style>
